<template>
  <div class="paddingTop search_page">
    <head-top head-title="房屋绑定" goBack="true"></head-top>
    <div class="middle">
    
      <input
        type="hidden"
        style="width: 12rem;height:1.5rem; font-size: 0.8rem;margin-top:0.5rem"
        placeholder="   输入客户名称"
        v-model="person"
      />
     
      <p>房屋信息</p>
      <input
        type="text"
        style="width: 12rem;height:1.5rem; font-size: 0.8rem;margin-top:0.5rem"
        placeholder="   房屋信息"
        v-model="address"
      />
      <a v-if="status==0" style="margin-right:3rem">
        <button class="su" v-show="isShow2" @click="change()">提交</button>
        <br />
        <button class="su3" v-show="isShow">审核中</button>
        <br />
      </a>
      <a v-else-if="status==1" style="margin-right:3rem">
        <button class="su2">已绑定</button>
        <br />
        <span style="font-size:0.6rem;margin-left:4.2rem;color:gray" @click="change0(id)">解除绑定</span>
      </a>
      <a v-else-if="status==-1" style="margin-right:3rem">
        <span style="font-size:0.6rem;margin-left:1.9rem;color:red">审核未通过，请填写完整地址</span>
        <button class="su">提交</button>
      </a>
    </div>
  </div>
</template>

<script>
import headTop from "../../components/header/head";
import footGuide from "../../components/footer/footGuide";
import { searchRestaurant } from "../../service/getData";
import { imgBaseUrl } from "../../config/env";
import { getStore, setStore } from "../../config/mUtils";
export default {
  data() {
    return {
      id: "",
      userId:sessionStorage.getItem("userId"),
      person: "",
      address: "",
      status: "",
      isShow: false,
      isShow2: true,
    };
  },
  created(id) {
    var vm = this;
    console.log(vm.id);
    this.axios({
      method: "get",
      url: "http://172.16.9.12:8081/getUserById",
      params: {
        userId: this.userId,
      },
    }).then(function (res) {
      console.log(res.data);
      vm.person = res.data;

      vm.axios({
        method: "POST",
        url: "http://172.16.9.12:8081/house/house/findHouse",
        params: {
          id:vm.id,
          person: vm.person,
          status: vm.status,
        },
      }).then(function (res) {
        console.log(res);
        if (res.data.code == 200) {
          vm.id = res.data.data.house.id;
          vm.address = res.data.data.house.address;
          vm.status = res.data.data.house.status;
        } else {
          vm.address = null;
        }
      });
    });
  },
  methods: {
    find() {
      var vm1 = this;
      this.axios({
        method: "POST",
        url: "http://172.16.9.12:8081/house/house/findHouse",
        params: {
          person: this.person,
          status: this.status,
        },
      }).then(function (res) {
        console.log(res);
        if (res.data.code == 200) {
          vm1.address = res.data.data.house.address;
          vm1.status = res.data.data.house.status;
        } else {
          vm1.address = null;
        }
      });
    },
    change() {
      var vm = this;
      this.axios({
        method: "post",
        params: {
          address: this.address,
          person: this.person,
        },
        url: "http://172.16.9.12:8081/house/house/addHouse",
      }).then(function (res) {
        //弹出成功提示
        vm.$message({
          message: res.data.message,
          type: "success",
        });
        vm.isShow = !vm.isShow;
        vm.isShow2 = !vm.isShow2;
        //  vm.$router.go(0);
      });
    },
    change0(id) {
      var vm2 = this;
      this.axios({
        method: "post",
        url: "http://172.16.9.12:8081/house/house/updateHouse0",
        params: {
          id: id,
        },
      }).then(function (res) {
        vm2.$router.go(0);
      });
    },
  },
  components: {
    headTop,
  },
};
</script>

<style>
.su {
  color: white;
  background-color: yellowgreen;
  height: 1.5rem;
  width: 5rem;
  border-radius: 1rem;
  margin-top: 2rem;
  margin-left: 3rem;
}
.su2 {
  color: white;
  background-color: royalblue;
  height: 1.5rem;
  width: 5rem;
  border-radius: 1rem;
  margin-top: 2rem;
  margin-left: 3rem;
}
.su3 {
  color: white;
  background-color: slategray;
  height: 1.5rem;
  width: 5rem;
  border-radius: 1rem;
  margin-top: 2rem;
  margin-left: 3rem;
}
.middle {
  margin: 4rem 2.1rem;
}
p {
  margin-left: 3.5rem;
  margin-top: 2rem;
}
input {
  border-radius: 1.2rem;
}
</style>